<template>
  <view class="load" v-if="!load">
    <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
  </view>
  <view class="fieldlist" v-else>
    <view class="fix">
      <!-- <u-status-bar></u-status-bar> -->
      <!-- <view class="topBox">
        <view class="hyq">订场</view>
      </view> -->
      <view class="searchbox">
        <view class="searchimgbox">
          <image class="searchimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710752819733548.png">
          </image>
        </view>
        <input class="searchtext" type="text" v-model="golfname" placeholder="请输入商户名搜索"
          placeholder-class="placeholderStyle " @blur="handsearch" />
      </view>
    </view>
    <view>
      <x-scroll @scroll="scroll" :fixed="true" :isNav="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower"
        :refresh="true">
        <block v-if="list.length != 0">
          <view class="listbox" v-for="(item, index) in list" :key="index" @click="gotostadium(item.ID)">
            <view class="listCell">
              <view class="imgbox">
                <image class="courtimg" :src="item.ShopLogo" mode="aspectFill"></image>
              </view>

              <view class="contentbox">
                <view class="shopNamebox">
                  <view class="shopName">
                    {{ $util.entitiesToUtf16(item.ShopName) }}
                  </view>
                  <image v-if="item.IsAuth == 1" class="authen"
                    src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17174039204751074.png" mode="widthFix">
                  </image>
                </view>

                <view class="labelbox">
                  <text class="label" v-for="(value, i) in item.Specialty" :key="i">{{ value }}</text>
                </view>
                <view class="time">{{
                  item.WorkTime ? "营业时间：" + item.WorkTime : ""
                }}</view>
                <view class="addressbox">
                  <view class="address">{{ item.Province || "" }}</view>
                  <view class="address">{{ item.City || "" }}</view>
                  <!-- <view class="move">{{ item.Province }}</view> -->
                </view>
                <view class="stateBox">
                  <view class="stateText">商家状态:{{ statusType[item.Status] }}</view>
                </view>
              </view>
            </view>

            <view class="btnBox" v-if="item.Status == 0">
              <view class="btn_" @click.stop="auditItem(item.ID, -1, index, '拒绝')">
                拒绝
              </view>
              <view class="btn_ btn_soild" @click.stop="auditItem(item.ID, 1, index, '同意')">
                同意
              </view>
            </view>
            <view class="btnBox" v-else>
              <view class="btn_" @click.stop="auditItem(item.ID, 1, index, '启用')">
                启用
              </view>
              <view class="btn_ btn_No_soild" @click.stop="auditItem(item.ID, -99, index, '禁用')">
                禁用
              </view>
            </view>

          </view>
          <view style="height:250rpx;"></view>
        </block>
        <view class="nondbox" v-else>
          <u-empty mode="list" width="100" height="100"
            icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
            iconSize="32" text="暂无待审核商家"></u-empty>
        </view>
      </x-scroll>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      skill: '', // 运动类型
      Distance: '', // 距离
      televel: '', // 级别
      navlist: [
        {
          title: "运动",
          id: 'b1',
          list: [],
        },
        {
          title: "距离",
          id: 'b2',
          list: [
            { choose: false, text: "500m以内" },
            { choose: false, text: "2km以内" },
            { choose: false, text: "5km以内" },
            { choose: false, text: "同城" },
            { choose: false, text: "不限" },
          ],
        },
        {
          title: "级别",
          id: 'b3',
          list: [{ choose: false, text: "金牌商家" }],
        },
      ],
      load: false,
      ossPath: "",
      tabiex: 0,
      index: 1,
      size: 10,
      list: [],
      islist: true,
      label: [],
      distance: null,
      nowLng: null,
      nowLat: null,
      golfname: '',
      tablist: [],
      shopstate: -1,
      swiperHeight: 228, //轮播图高度
      bannerList: [],
      Shoptype: "",
      searchHeight: 0, //搜索box的高度
      showSearch: false,
      statusType: {
        0: '待审核',
        1: '已通过',
        '-1': '已拒绝',
        '-99': '已禁用',
      }
    };
  },
  async onLoad() {
    this.ossPath = this.$ossPath;
    this.getcourtlist();

  },
  methods: {
    // 重置搜索
    resetSearch() {
      for (let i = 0; i < this.navlist.length; i++) {
        for (let j = 0; j < this.navlist[i].list.length; j++) {
          this.navlist[i].list[j].choose = false;
        }
      }
      this.skill = ''
      this.Distance = ''
      this.televel = ''
      // this.searchContent = "";
      // this.subSearch();
    },
    //同意或拒绝圈子(1 同意  -1 拒绝  -99 禁用)
    async auditItem(id, status, index, text) {
      let _this = this;
      let spText = (text == '启用' || text == '禁用') ? '' : '入驻'
      let content = `确定要${text}该商家${spText}吗？`
      uni.showModal({
        title: '温馨提示',
        content: content,
        confirmText: text,
        success: async function (rs) {
          if (rs.confirm) {
            _this.apiSignComfirm(id, status, index)
          } else if (rs.cancel) {
          }
        }
      });

    },
    async apiSignComfirm(id, status, index) {
      this.$api.post('Shops/Audit', {
        ID: id,
        Status: status,
      }).then(res => {
        const { code, data, message } = res
        if (code == 0) {
          this.list[index].Status = status
          this.$pv.msg('操作成功');
        } else {
          this.$pv.msg(message);
        }

      });

    },
    //搜索
    handsearch() {
      if (this.golfname == "") {
        this.index = 1;
      }
      this.list = [];
      this.getcourtlist();
    },
    //跳转商家详细
    gotostadium(id) {
      uni.navigateTo({
        url: `/pages/court/stadium?id=${id}`,
      });
    },
    //商家列表
    async getcourtlist() {
      let res = await this.$api.post("/Shops/ManageShop", {
        PageIndex: this.index,
        PageSize: this.size,
        ShopName: this.golfname,
        Status: 99,
      });
      // let a = res.data;
      if (res.code == 0) {
        if (res.data.length < this.size) {
          this.islist = false;
        }
        if (this.index == 1) {
          this.list = res.data;
        } else {
          // this.list = []
          this.list = this.list.concat(res.data);
        }
        for (let i = 0; i < this.list.length; i++) {
          let lable = [];
          try {
            lable = this.list[i].Specialty.split(",") || this.list[i].Specialty;
          } catch (error) {
            lable = this.list[i].Specialty;
          }

          this.list[i].Specialty = lable;
        }
        this.load = true;
      }
    },
    //滚动到底部触发
    async scrolltolower() {
      if (this.islist) {
        this.index++;
        this.getcourtlist();
      }

      // this.getMsgNum();
    },
    scroll(e) {
      const detail = e.detail;
      // console.log(detail);
    },
    //下拉刷新
    onRefresh() {
      this.index = 1;
      this.getcourtlist();
    },
  },
};
</script>
<style lang="scss">
page {
  // background-color: #f6f6f6;
}

.topBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: relative;

  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }
}



.fieldlist {
  height: 100vh;
  overflow: hidden;
}

.fix {
  position: relative;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
}

.bannerImageBox {
  width: 100%;
  padding: 24rpx 0;

  .adverimg {
    width: 702rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto;
  }
}


.checkbox {
  width: 96rpx;
  height: 48rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 24rpx;
  margin-left: 40rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;

  &::after {
    position: absolute;
    top: 76%;
    right: -4rpx;
    transform: translate(-11%, -32%) rotate(135deg);
    content: "";
    border-top: 12rpx solid transparent;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-bottom: 12rpx solid #999;
  }
}


.placeholderStyle {
  color: rgba(255, 255, 255, 0.6);
  /* 占位符文本颜色 */
  // color: red;
  font-size: 28rpx;
  /* 占位符文本字体大小 */
  line-height: 72rpx;
}

.listbox {
  margin: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: #fff;

  box-sizing: border-box;

  .listCell {
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    min-height: 260rpx;
    display: flex;
  }

  .stateBox {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #333333;
  }

  .imgbox {
    width: 35%;
    height: 100%;
    text-align: center;

    .courtimg {
      width: 210rpx;
      height: 210rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
  }

  .contentbox {
    width: 65%;
    height: 100%;
    margin-top: 10rpx;

    .shopNamebox {
      display: flex;
      align-items: center;
    }

    .shopName {
      max-width: 80%;
      color: #333333;
      font-size: 32rpx;
      margin-bottom: 10rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .authen {
      width: 104rpx;
      height: 44;
      margin-left: 4rpx;
    }

    .labelbox {
      margin-bottom: 36rpx;

      .label {
        // width: 92rpx;
        // height: 40rpx;
        // text-align: center;
        // line-height: 40rpx;
        font-size: 20rpx;
        color: #f56e1e;
        background: #ffeee4;
        border-radius: 8rpx;
        margin-right: 20rpx;
        padding: 6px 12rpx;
      }
    }

    .time {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .addressbox {
      width: 100%;
      display: flex;
      // justify-content: space-between;

      .address {
        // width: 70%;
        font-size: 24rpx;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 15rpx;
      }

      .move {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

.searchbox {
  padding: 20rpx 24rpx;
  display: flex;
  align-items: center;
  box-sizing: 36rpx;
  background-color: #fff;

  .searchimgbox {
    border-radius: 36rpx 0 0 36rpx;
    text-align: center;
    width: 10%;
    height: 72rpx;
    line-height: 72rpx;
    overflow: hidden;
    background-color: #f7f7f7;

    .searchimg {
      vertical-align: middle;
      width: 40rpx;
      height: 40rpx;
      margin: 0 0 12rpx 15rpx;
    }
  }

  .searchtext {
    flex: 1;
    background-color: #f7f7f7;
    color: #999999;
    height: 72rpx;
    border-radius: 0 36rpx 36rpx 0;
  }

  .input-placeholder {
    color: #999;
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20rpx 0;
  z-index: 10;

  .btn_ {
    margin: 0 30rpx;
    font-size: 20rpx;
    color: #706EEE;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    border: 2rpx solid #E4E4E4;
    min-width: 100rpx;
  }

  .btn_soild {
    color: #fff;
    background: #706EEE;
    border: 2rpx solid #706EEE;
  }

  .btn_No_soild {
    background: #FC4F45;
    border: 2rpx solid #FC4F45;
    color: white;
  }
}

.nondbox {
  width: 30%;
  margin: 20rpx auto;
  text-align: center;
}
</style>